﻿<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>raorao Config</title>
		<meta name="keywords" content="raorao Config" />
		<meta name="description" content="[raorao Config]基于Spring Boot Starter的小型Config框架。" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- basic styles -->
		<link href="ace/assets/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="ace/assets/css/font-awesome.min.css" />
		<link rel="stylesheet" href="ace/assets/css/ace.min.css" />
		<link rel="stylesheet" href="ace/assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="ace/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="ace/assets/css/ace-ie.min.css" />
		<link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
		<link rel="stylesheet" href="js/dataTables/jquery.dataTables.min.css">
		<style type="text/css">
			div#rMenu {
				position:absolute;
				visibility:hidden;
				top:0;
				background-color: #555;
				text-align: left;
				padding: 2px;
			}
			div#rMenu ul{
				margin: 0px;
			}
			div#rMenu ul li{
				margin: 1px 0;
				padding: 0 5px;
				cursor: pointer;
				list-style: none outside none;
				background-color: #DFDFDF;
			}
		</style>
		<![endif]-->
	</head>

	<body>
		<div class="navbar navbar-default" id="navbar">
			<script type="text/javascript">
				try{ace.settings.check('navbar' , 'fixed')}catch(e){}
			</script>

			<div class="navbar-container" id="navbar-container">
				<div class="navbar-header pull-left">
					<a href="#" class="navbar-brand">
						<small>
							<i class="icon-leaf"></i>
							raorao配置中心
						</small>
					</a>
					<!-- /.brand -->
				</div>
				<!-- /.navbar-header -->

				<div class="navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav">
						<li class="light-blue">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<img class="nav-user-photo" src="ace/assets/avatars/user.jpg" alt="Jason's Photo" />
								<span class="user-info">
									<small>欢迎光临,</small>
									Jason
								</span>

								<i class="icon-caret-down"></i>
							</a>

							<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
								<li>
									<a href="#">
										<i class="icon-cog"></i>
										设置
									</a>
								</li>

								<li>
									<a href="#">
										<i class="icon-user"></i>
										个人资料
									</a>
								</li>

								<li class="divider"></li>

								<li>
									<a href="#">
										<i class="icon-off"></i>
										退出
									</a>
								</li>
							</ul>
						</li>
					</ul>
					<!-- /.ace-nav -->
				</div>
				<!-- /.navbar-header -->
			</div>
			<!-- /.container -->
		</div>

		<div class="main-container" id="main-container">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>

			<div class="main-container-inner">
				<a class="menu-toggler" id="menu-toggler" href="#">
					<span class="menu-text"></span>
				</a>
				<!--左侧菜单-->
				<div class="sidebar" id="sidebar">
					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
					</script>

					<div class="sidebar-shortcuts" id="sidebar-shortcuts">

					</div>

					<ul class="nav nav-list">
						<li class="active">
							<a href="index.html">
								<i class="icon-dashboard"></i>
								<span class="menu-text"> 配置管理 </span>
							</a>
						</li>

						<li>
							<a href="typography.html">
								<i class="icon-text-width"></i>
								<span class="menu-text"> 配置项 </span>
							</a>
						</li>

					</ul>
					<!-- /.nav-list -->
					<div class="sidebar-collapse" id="sidebar-collapse">
						<i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
					</div>

					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
					</script>
				</div>

				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<script type="text/javascript">
							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
						</script>
						<!-- .breadcrumb -->
						<ul class="breadcrumb">
							<li>
								<i class="icon-home home-icon"></i>
								<a href="#">首页</a>
							</li>
							<li class="active">配置管理</li>
						</ul>
						<!-- .breadcrumb -->
					</div>
					<!--内容-->
					<div class="page-content">
						<div class="page-header">
							<h1>
								配置管理
							</h1>
						</div>
						<!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<div class="row">
									<div class="col-sm-3">
										<div class="widget-box">
											<div class="widget-header header-color-green2">
												<h4 class="lighter smaller">版本信息</h4>
												<button id="add_project" class="btn btn-minier btn-success">添加版本</button>
												<button id="add_file" class="btn btn-minier btn-success">添加配置文件</button>
												<button id="add_config" class="btn btn-minier btn-success">添加配置信息</button>
											</div>

											<div class="widget-body">
												<div class="widget-main padding-8">
													<ul id="project_tree" class="ztree"></ul>
												</div>
											</div>
										</div>
									</div>

									<div class="col-sm-9">
										<div class="table-responsive">
											<table id="config-table" class="table table-striped table-bordered table-hover">
												<thead>
												<tr>
													<th>id</th>
													<th>名称：key</th>
													<th>配置值</th>
													<th>配置信息类型</th>
													<th>创建人</th>
													<th>创建时间</th>
													<th>更新人</th>
													<th>更新时间</th>
													<th>操作</th>
												</tr>
												</thead>
												<tbody></tbody>
											</table>
										</div>
									</div>
								</div>

								<div class="hr hr32 hr-dotted"></div>

								<!-- PAGE CONTENT ENDS -->
							</div>
							<!-- /.col -->
						</div>
						<!-- /.row -->
					</div>
					<!--内容-->
				</div><!-- /.main-content -->

				<!--工具栏设置栏-->
				<div class="ace-settings-container" id="ace-settings-container">
					<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
						<i class="icon-cog bigger-150"></i>
					</div>

					<div class="ace-settings-box" id="ace-settings-box">
						<div>
							<div class="pull-left">
								<select id="skin-colorpicker" class="hide">
									<option data-skin="default" value="#438EB9">#438EB9</option>
									<option data-skin="skin-1" value="#222A2D">#222A2D</option>
									<option data-skin="skin-2" value="#C6487E">#C6487E</option>
									<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
								</select>
							</div>
							<span>&nbsp; 选择皮肤</span>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
							<label class="lbl" for="ace-settings-navbar"> 固定导航条</label>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
							<label class="lbl" for="ace-settings-sidebar"> 固定滑动条</label>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
							<label class="lbl" for="ace-settings-breadcrumbs">固定面包屑</label>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
							<label class="lbl" for="ace-settings-rtl">切换到左边</label>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
							<label class="lbl" for="ace-settings-add-container">
								切换窄屏
								<b></b>
							</label>
						</div>
					</div>
				</div>
				<!--工具栏设置栏-->
			</div>
			<!-- /.main-container-inner -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="icon-double-angle-up icon-only bigger-110"></i>
			</a>
		</div>
		<!-- /.main-container -->

		<!-- 树-右键菜单 -->
		<div id="rMenu">
			<ul>
				<li id="m_add" onclick="addTreeNode();">增加节点</li>
				<li id="m_edit" onclick="addTreeNode();">编辑节点</li>
				<li id="m_del" onclick="removeTreeNode();">删除节点</li>
				<li id="m_reset" onclick="resetTree();">恢复zTree</li>
			</ul>
		</div>
</body>
</html>
<script type="text/javascript">
	window.jQuery || document.write("<script src='ace/assets/js/jquery-2.0.3.min.js'>"+"<"+"script>");
</script>
<script type="text/javascript">
	window.jQuery || document.write("<script src='ace/assets/js/jquery-1.10.2.min.js'>"+"<"+"script>");
</script>
<script type="text/javascript">
	if("ontouchend" in document) document.write("<script src='ace/assets/js/jquery.mobile.custom.min.js'>"+"<"+"script>");
</script>
<script src="ace/assets/js/ace-extra.min.js"></script>
<script src="ace/assets/js/html5shiv.js"></script>
<script src="ace/assets/js/respond.min.js"></script>
<script src="ace/assets/js/bootstrap.min.js"></script>
<script src="ace/assets/js/typeahead-bs2.min.js"></script>
<script src="ace/assets/js/excanvas.min.js"></script>
<script src="ace/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="ace/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="ace/assets/js/jquery.slimscroll.min.js"></script>
<script src="ace/assets/js/jquery.easy-pie-chart.min.js"></script>
<script src="ace/assets/js/flot/jquery.flot.min.js"></script>
<script src="ace/assets/js/flot/jquery.flot.pie.min.js"></script>
<script src="ace/assets/js/flot/jquery.flot.resize.min.js"></script>
<script src="ace/assets/js/ace-elements.min.js"></script>
<script src="ace/assets/js/ace.min.js"></script>
<script src="js/dataTables/jquery.dataTables.min.js"></script>
<script src="ace/assets/js/jquery.dataTables.bootstrap.js"></script>
<script type="text/javascript" src="js/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript">
	jQuery(function($) {
		$('.easy-pie-chart.percentage').each(function(){
			var $box = $(this).closest('.infobox');
			var barColor = $(this).data('color') || (!$box.hasClass('infobox-dark') ? $box.css('color') : 'rgba(255,255,255,0.95)');
			var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2';
			var size = parseInt($(this).data('size')) || 50;
			$(this).easyPieChart({
				barColor: barColor,
				trackColor: trackColor,
				scaleColor: false,
				lineCap: 'butt',
				lineWidth: parseInt(size/10),
				animate: /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase()) ? false : 1000,
				size: size
			});
		})

		$('.dialogs,.comments').slimScroll({
			height: '300px'
		});

		//Android's default browser somehow is confused when tapping on label which will lead to dragging the task
		//so disable dragging when clicking on label
		var agent = navigator.userAgent.toLowerCase();
		if("ontouchstart" in document && /applewebkit/.test(agent) && /android/.test(agent))
			$('#tasks').on('touchstart', function(e){
				var li = $(e.target).closest('#tasks li');
				if(li.length == 0)return;
				var label = li.find('label.inline').get(0);
				if(label == e.target || $.contains(label, e.target)) e.stopImmediatePropagation() ;
			});

		//表单全选
		$('table th input:checkbox').on('click' , function(){
			var that = this;
			$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});

		});
	})
</script>
<script type="application/javascript">
	$(document).ready(function(){
		$("#add_project").click(function(){
			window.open("form-project.html");
		});
		$("#add_file").click(function(){
			var node=zTree.getSelectedNodes()[0];
			if(node==null||node==undefined){
				alert("未选择节点！");
				return ;
			}
			var leve=node["leve"];
			if(leve==null||leve==undefined||leve!=3){
				alert("选择的节点不对！");
				return ;
			}
			var filename = prompt("请输入配置文件名称：", "application.yml");
			var projectId=node["projectId"];
			var data={
				"projectId":parseInt(projectId),
				"name":filename
			}
			$.post("file/add",data,function(result){
				if(result["code"]==200){
					alert("添加成功！")
				}else{
					alert("添加失败！")
				}
			})
		});
		$("#add_config").click(function () {
			var node=zTree.getSelectedNodes()[0];
			if(node==null||node==undefined){
				alert("未选择节点！");
				return ;
			}
			var leve=node["leve"];
			if(leve==null||leve==undefined||leve!=4){
				alert("选择的节点不对！");
				return ;
			}
			var fileId=node["projectId"];
			window.open("form-config.html?fileId="+fileId);
		});
	});
</script>
<!--树结构初始化-->
<SCRIPT type="text/javascript">
	var zTree, rMenu,selectNode;
	var treeSetting = {
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			beforeClick: zTreeBeforeClick,
			onRightClick: OnRightClick
		}
	};
	//获取项目树
	function initProjectTree() {
		$.getJSON("project/all",function(result){
			if(result["code"]==200){
				var zNodes=createzNodes(result["data"])
				$.fn.zTree.init($("#project_tree"), treeSetting, zNodes);
				zTree = $.fn.zTree.getZTreeObj("project_tree");
				rMenu = $("#rMenu");
			}
		})
	}

	//创建树节点数据
	function createzNodes(data){
		for(var i = 0; i < data.length; i++){
			var item=data[i];
			switch (item["leve"]){
				case 1: item["icon"]="js/ztree/css/zTreeStyle/img/diy/1_close.png";break;
				case 2: item["icon"]="js/ztree/css/zTreeStyle/img/diy/8.png";break;
				case 3: item["icon"]="js/ztree/css/zTreeStyle/img/diy/9.png";break;
				case 4: item["icon"]="js/ztree/css/zTreeStyle/img/diy/2.png";break;
			}
			if(item["children"]&&item["children"].length>0){
				item["children"]=createzNodes(item["children"]);
			}
		}
		return data;
	}

	// 树点击事件
	function zTreeBeforeClick(treeId, treeNode, clickFlag) {
		selectNode=treeNode;
		if(treeNode["leve"] == 4){
			initConfigByFileId(treeNode["fileId"]);
		}
	};

	// 右键菜单
	function OnRightClick(event, treeId, treeNode) {
		if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
			zTree.cancelSelectedNode();
			showRMenu("root", event.clientX, event.clientY);
		} else if (treeNode && !treeNode.noR) {
			zTree.selectNode(treeNode);
			showRMenu("node", event.clientX, event.clientY);
		}
	}

	// 展示菜单
	function showRMenu(type, x, y) {
		$("#rMenu ul").show();
		if (type=="root") {
			$("#m_del").hide();
		} else {
			$("#m_del").show();
		}

		y += document.body.scrollTop;
		x += document.body.scrollLeft;
		rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

		$("body").bind("mousedown", onBodyMouseDown);
	}
	// 隐藏菜单
	function hideRMenu() {
		if (rMenu) rMenu.css({"visibility": "hidden"});
		$("body").unbind("mousedown", onBodyMouseDown);
	}
	// 鼠标按下事件
	function onBodyMouseDown(event){
		if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
			rMenu.css({"visibility" : "hidden"});
		}
	}
	// 添加树节点
	function addTreeNode() {
		hideRMenu();
		var newNode = { name:"增加" + (addCount++)};
		if (zTree.getSelectedNodes()[0]) {
			newNode.checked = zTree.getSelectedNodes()[0].checked;
			zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
		} else {
			zTree.addNodes(null, newNode);
		}
	}
	// 删除树节点
	function removeTreeNode() {
		hideRMenu();
		var nodes = zTree.getSelectedNodes();
		if (nodes && nodes.length>0) {
			if (nodes[0].children && nodes[0].children.length > 0) {
				var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
				if (confirm(msg)==true){
					zTree.removeNode(nodes[0]);
				}
			} else {
				zTree.removeNode(nodes[0]);
			}
		}
	}
	// 刷新树节点
	function resetTree() {
		hideRMenu();
		initProjectTree();
	}

	$(document).ready(function(){
		//初始化项目树
		initProjectTree();
	});
</SCRIPT>
<!--表单初始化-->
<script type="text/javascript">
	var dataTable=$('#config-table').DataTable( {
		"data":[],
		"scrollCollapse": true,
		"pageLength": 1000,
		"columns": [
			{ "data": "id" },
			{ "data": "name" },
			{ "data": "val" },
			{ "data": "type" },
			{ "data": "createBy" },
			{ "data": "createAt" },
			{ "data": "updateBy" },
			{ "data": "updateAt" },
			{ "data": null }
		],
		columnDefs: [
			{
				targets: 8,
				render: function (a, b, c, d) {
					var context =
							{
								func: [
									{"name": "修改", "fn": "edit(\'" + c.id + "\')", "type": "primary"},
									{"name": "删除", "fn": "del(\'" + c.id + "\')", "type": "danger"}
								]
							};
					var html = '<button type="button" class="btn btn-primary btn-sm" onclick="datafrom_edit('+c.id+')">编辑</button>'
					html += '<button type="button" class="btn btn-danger btn-sm" onclick="datafrom_del('+c.id+')">删除</button>'
					return html;
				}
			}
		]
	} );
	//根据文件id获取配置信息
	function initConfigByFileId(fileId){
		$.getJSON("config/queryByFileId?id="+fileId,function(result){
			if(result["code"]==200){
				dataTable.clear();
				dataTable.rows.add(result["data"]).draw();
			}
		})
	}
	function datafrom_edit(id) {
		window.open("form-config.html?configId="+id);
	}
	function datafrom_del(id) {
		$.get("config/del?id="+id,function(result){
			if(result["code"]==200){
				alert("删除成功！")
			}else{
				alert("删除失败！")
			}
			if(selectNode["leve"] == 4){
				initConfigByFileId(selectNode["fileId"]);
			}
		})
	}
</script>